.dropdown {

    user-select: none;
    position: relative;
    display: inline-block;

    &.is-active .dropdown-menu {
        position: absolute;
        display: block;
        border-radius: 3px;
        box-shadow: 0px 0px 2px gray(219);
        border: 1px solid gray(219);
        width: 12rem;
        min-width: 12rem;
        margin-top: 3px;
        top: 100%;
        left: 0;
        z-index: 20;

        & .dropdown-content {
            padding-top: .5rem;
            padding-bottom: .5rem;
            background-color: white;

            & > .dropdown-item {
                color: gray(74);
                display: block;
                padding: .375rem 1rem;
                font-size: ms(0)rem;

                &.is-active {
                    background-color: #3273dc;
                    color: white;
                }


            }

            & .dropdown-divider {
                border: 0px;
                border-top: 1px solid gray(219);
                margin: .5rem;
            }
        }
    }

    & .dropdown-menu {
        display: none;
    }

    &.is-right .dropdown-menu {
        left: auto;
        right: 0;
    }

    &.is-up .dropdown-menu {
        bottom: calc(2.25em);
        margin-bottom: 3px;
        top: auto;
    }


}
